<h2>Budget</h2>

<div>
	<label>Jaar:</label> <input type="number" ng-model="jaar"/>
	<hr>
</div>

<button ng-click="toevoegen()" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-plus"></span></button>

<table class="table table-striped table-condensed" fixed-header table-height="700px">
	<thead>
		<tr>
			<th>boekrekening</th>
			<th>boekrekening - omschrijving</th>
			<th>jaar</th>
			<th>bedrag</th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr ng-repeat="budget in budgetten">
			<td>{{budget.boekrekening.rekeningnr}}</td>
			<td>{{budget.boekrekening.omschrijving}}</td>
			<td>{{budget.jaar}}</td>
			<td>{{budget.bedrag}}</td>
			<td>
				<button ng-click="verwijderen($index)" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-trash"></span></button>
				<button ng-click="bijwerken($index)" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-pencil"></span></button>
			</td>
	
		</tr>
	</tbody>
</table>

<script type="text/ng-template" id="budgetModal.html">
	<div class="modal-header">
		<h3 class="modal-title">{{actie}} van een budget-item</h3>
	</div>
	<div class="modal-body">
		<form ng-submit="save()" role="form" id="myform">
			<div class="form-group">
				<label for="boekrekening">Boekrekening:</label> 
				<select class="form-control" ng-model="formObj.boekrekening" ng-init="initBoekrekeningen()" 
					ng-options="boekrekening.rekeningnr  + ' - ' + boekrekening.omschrijving for boekrekening in boekrekeningen | filter:{budgeteerbaar:'true'} track by boekrekening.id" />
			</div>
			<div class="form-group">
				<label for="jaar">Jaar: </label>
				<input id="jaar" class="form-control" type="number" ng-model="formObj.jaar" placeholder="Jaar" required />
			</div>
			<div class="form-group">
				<label for="bedrag">Bedrag: </label>
				<input id="bedrag" class="form-control" type="text" ng-model="formObj.bedrag" placeholder="Bedrag in EUR" required />
			</div>
		</form>
	</div>
	<div class="modal-footer">	
		<button type="submit" class="btn btn-success btn-sm" form="myform"><span class="glyphicon glyphicon-save"></span></button>
		<button type="reset" ng-click="reset()" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-remove"></span></button>
	</div>
</script>
